<template>
  <div id="app">
      <div class="box">
          <div ref="vantaRef" style="width: 100%; height: 100vh">
    <el-container>
      <el-main>
        <div style="float: right;margin-top: 0px;">
          <el-button type="primary" @click="backToIndex">返回首页
            <i class="el-icon-arrow-right el-icon--right"></i>
          </el-button>
        </div>
        <div style="height: 450px;background-position: center;background-repeat: no-repeat;background-size: 100%">
          <el-card style="width: 500px;height: 450px;margin: 100px auto;background-color: rgba(255,255,255,0.85)">
            <h1 style="position: relative;left: 50px;top: 20px">欢迎登录</h1>
            <a style="float: right;
                    text-decoration: none;
                    color: #409EFF;
                    position: relative;
                    top: 10px;
                    margin-right: 30px"
               @click="toReg">
              没有账号？立即注册
            </a>
            <el-form :model="user" :rules="rules" ref="user" label-width="80px" style="width: 400px;margin: 50px auto">

              <el-form-item label="手机号" prop="phone">
                <el-input id="tel" placeholder="请输入手机号" prefix-icon="el-icon-user"
                          v-model="user.phone"></el-input>
              </el-form-item>

              <el-form-item label="验证码" prop="code">
                <div style="height: 41.2px;">
                  <el-input placeholder="请输入验证码" v-model="user.code"
                            style="width: 150px;position: relative; top: -15px"></el-input>
                  <el-image :src="url" style="cursor: pointer; position: relative; left: 6px"
                            @click="getUrl()"></el-image>
                </div>
              </el-form-item>
              <el-form-item label="短信验证"  prop="sendCode">
                <el-input placeholder="请输入验证码" v-model="user.sendCode"
                          style="width: 180px;position: relative;" @keyup.enter.native="login('user')"></el-input>
                <el-button id="ver" class="register-msg-btn" v-show="show" style="position: relative; margin-left: 10px"
                           v-on:click="sendPhone">获取验证码
                </el-button>
                <el-button disabled="true" class="register-msg-btn" v-show="!show" style="cursor: default;">{{ count }}s
                </el-button>
              </el-form-item>

              <el-form-item>
                <el-button type="primary" @click="login('user')" style="margin-left: 40px">登录</el-button>
                <el-button @click="resetForm('user')" style="margin-left: 30px">重置</el-button>
              </el-form-item>

              <el-form-item label="登录方式">
        <span>
          <el-button icon="el-icon-eleme" @click="loginByEmail">邮箱登录</el-button>
          <el-button icon="el-icon-edit" @click="loginByPassword">账号密码登录</el-button>
        </span>
              </el-form-item>

            </el-form>
          </el-card>
        </div>
      </el-main>
      <!--底部开始-->
      <el-footer></el-footer>
      <!--底部结束-->
    </el-container>
          </div>
      </div>
  </div>

</template>

<script>
// import * as THREE from "three";
import GLOBE from "vanta/src/vanta.globe";
export default {

  data: function () {
    return {
      user: {phone: '', code: '', sendCode: ''},
      phoneCode: {phone: '', code: ''},
      logins: {phone: '', sendCode: ''},
      url: "",
      show: true,
      count: '',
      timer: null,
      rules: {
        phone: [
          {required: true, message: '请输入电话号码', trigger: 'blur'},
          {
            pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
            message: '电话号码输入不正确',
            trigger: 'blur'
          }
        ],
        code: [
          {required: true, message: '请输入图片验证码', trigger: 'blur'}
        ],
        sendCode: [
          {required: true, message: '请输入短信验证码', trigger: 'blur'}
        ],
      }
    }
  },
    mounted() {
        this.vantaEffect = GLOBE({
            el: this.$refs.vantaRef,
            THREE: THREE,
        });
        VANTA.GLOBE({
            el: this.$refs.vantaRef,
            /*以下为样式配置*/
            mouseControls: true,
            touchControls: true,
            gyroControls: false,
            minHeight: 200.0,
            minWidth: 200.0,
            scale: 1.0,
            scaleMobile: 1.0,
            color: 0xc5c5c5,
            size: 1.1,
            backgroundColor: 0x4300bb,
        });
    },
    beforeDestroy() {
        if (this.vantaEffect) {
            this.vantaEffect.destroy();
        }
    },
  methods: {
    toReg() {
      window.location.href = "regByPhone.html"
    },
    backToIndex() {
      window.location.href = "index.html"
    },

    loginByPassword() {
      window.location.href = "loginByPassword.html"
    },

    loginByEmail() {
      window.location.href = "loginByEmail.html"
    },

    // compare() {
    //   let telReg = /^1[3456789]\d{9}$/;
    //   let num = 60;
    //   if (telReg.test(tel.value)) {
    //     telError.style.display = 'none'
    //     this.sendPhone();
    //   } else {
    //     telError.style.display = 'block';
    //   }
    // },

    NumDown() {
      this.show = false;
      const TIME_COUNT = 60;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.show = false;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            this.show = true;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000)
      }
    },

    sendPhone() {
      this.phoneCode.phone = this.user.phone;
      this.phoneCode.code = this.user.code;
      let url = '/user/phoneSendMsg';
      this.$message.success("验证码发送成功!请注意查收");
      this.axios.post(url, this.phoneCode).then((response) => {
        if (response.data.code === 1) {
          this.NumDown();
        } else {
          this.$message.error(response.data.msg);
        }
      })
    },

    getUrl() {
      // {responseType:'blob'}
      let url = '/kaptcha';
      this.axios.get(url, {responseType: 'blob'}).then((response) => {
        console.log(response.data);
        this.url = window.URL.createObjectURL(response.data);
        console.log(this.url);
      })
    },

    login(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.logins.phone = this.user.phone;
          this.logins.sendCode = this.user.sendCode;
          let url = '/user/loginByPhone';
          console.log('url = ' + url);
          this.axios.post(url, this.logins).then((response) => {
            if (response.data.code === 1) {
              window.location.replace('/');
              localStorage.msg = response.data.msg;
              localStorage.user = JSON.stringify(response.data.data);
            } else {
              this.$message.error(response.data.msg);
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      })
    },

    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  },

  created: function () {
    this.getUrl();
  }
}
</script>

<style>
.bj {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-width: 1000px;
  z-index: -10;
  zoom: 1;
  background-color: #fff;
  background-image: url('http://rww08uahf.hn-bkt.clouddn.com/%E7%99%BB%E5%BD%95%E8%83%8C%E6%99%AF.png');
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-position: center 0;
}
</style>
